<template>
  <div class="articleManage_main">
    <div class="sx">
      <div>
        <span>模型名:</span>
        <el-input clearable v-model="modelSX.name" placeholder="请输入模型名" style="width: 200px"/>
      </div>
      <el-pagination
          style="position: absolute;right: 0; bottom: 0"
          v-model:current-page="modelSX.currentPage"
          :size="'default'"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
      <el-button type="primary" @click="getModel">搜索</el-button>
      <el-button type="primary" @click="openAddDialog">新增公共模型</el-button>
    </div>
    <div class="mx">
      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="models" stripe style="width: 100%" height="700px">

          <el-table-column label="模型ID" align="center" prop="id" width="150px">
          </el-table-column>
          <el-table-column label="模型名称" align="center" prop="name" width="150px">
          </el-table-column>
          <el-table-column label="模型单位" align="center" prop="unit"/>
          <el-table-column label="最小值" align="center" prop="minInput"/>
          <el-table-column label="最大值" align="center" prop="maxInput"/>
          <el-table-column label="创建日期" align="center" prop="createTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="danger" @click="modelDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="新增公共模型" width="30%">
    <el-form :model="formData" label-width="80px">
      <el-form-item label="模型名称">
        <el-input v-model="formData.name" placeholder="请输入模型名称" />
      </el-form-item>
      <el-form-item label="模型单位">
        <el-input v-model="formData.unit" placeholder="请输入单位" />
      </el-form-item>
      <el-form-item label="最小值">
        <el-input v-model="formData.minInput" type="number" />
      </el-form-item>
      <el-form-item label="最大值">
        <el-input v-model="formData.maxInput" type="number" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {parseTime} from "../../tool/utils.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {addModelAdminApi, addModelApi, deleteModelApi, getModelAllApi} from "@/api/model.js";


const total = ref(0)
const modelSX = ref({
  currentPage: 1,
  pageSize: 10,
  name:'',
})
const models = ref([])
onMounted(() => {
  initData()
})

function initData() {
  getModel()
}

function getModel() {
  getModelAllApi(modelSX.value).then(res => {
    models.value = res.data.modelList
    total.value = res.data.total
  })
}


function handleCurrentChange(currentPage) {
  modelSX.value.currentPage = currentPage
  getModel()
}


//删除文章
function modelDelete(id) {
  ElMessageBox.confirm(
      '你确定要删除这个模型吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteModelApi(id).then(res => {
          ElMessage({message: res.msg, type: 'success'})
          getModel()
        })
      })

}
const dialogVisible = ref(false)
const formData = ref({
  name: '',
  unit: '',
  minInput: 0,
  maxInput: 0
})

function openAddDialog() {
  dialogVisible.value = true
  // 重置表单数据
  formData.value = {
    name: '',
    unit: '',
    unitCn:'',
    minValue:'0',
    maxValue:'999',
    minInput: 0,
    maxInput: 0
  }
}

function submitForm() {
  addModelAdminApi(formData.value).then(res => {
    ElMessage.success(res.msg)
    dialogVisible.value = false
    getModel() // 刷新列表
  }).catch(() => {
    ElMessage.error('提交失败')
  })
}
</script>

<style scoped>
.articleManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  position: relative;
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>